import React, { Component, Fragment } from 'react';
import LogoPic from '../../static/logo.png';
import {
  Link
} from 'react-router-dom';
import { connect } from 'react-redux';

import {
  HeaderWrapper,
  HeaderBox,
  HeaderCenter,
  HeaderLeft,
  HeaderRight,
  HeaderLogo,
  HeaderUl,
  HeaderLi,
  HeaderItem,
  HeaderNav
} from './style'
import NavLink from "react-router-dom/es/NavLink";

class Header extends Component{
  render() {
    const { login } = this.props;
    return (
      <Fragment>
        <HeaderWrapper className='test'>
          <HeaderBox>
            <HeaderLeft className='fl'>
              <Link to='/'>
                <HeaderLogo>
                  <img className='imgLogo' alt='友享' src={ LogoPic } />
                </HeaderLogo>
              </Link>
            </HeaderLeft>
            <HeaderCenter>
              <HeaderNav>
                <HeaderUl>
                  <NavLink to='/'>
                    <HeaderLi className='fl navLi' >
                      <HeaderItem>
                        推荐
                      </HeaderItem>
                    </HeaderLi>
                  </NavLink>
                  <NavLink to='/looking'>
                    <HeaderLi className='fl navLi' >
                      <HeaderItem>
                        寻物
                      </HeaderItem>
                    </HeaderLi>
                  </NavLink>
                  <NavLink to='/loving'>
                    <HeaderLi className='fl navLi' >
                      <HeaderItem>
                        表白
                      </HeaderItem>
                    </HeaderLi>
                  </NavLink>
                  <NavLink to='/hollow'>
                    <HeaderLi className='fl navLi'>
                      <HeaderItem>
                        树洞
                      </HeaderItem>
                    </HeaderLi>
                  </NavLink>
                  <NavLink to='/carPooling'>
                    <HeaderLi className='fl navLi'>
                      <HeaderItem>
                        拼车
                      </HeaderItem>
                    </HeaderLi>
                  </NavLink>
                  <NavLink to='/dynamic'>
                    <HeaderLi className='fl navLi'>
                      <HeaderItem>
                        动态
                      </HeaderItem>
                    </HeaderLi>
                  </NavLink>
                  <HeaderLi className='fl'>
                    <HeaderItem className='btn'>
                      提问
                    </HeaderItem>
                  </HeaderLi>
                  <NavLink to='/writting'>
                    <HeaderLi className='fl '>
                      <HeaderItem className='btn'>
                        写文章
                      </HeaderItem>
                    </HeaderLi>
                  </NavLink>
                </HeaderUl>
              </HeaderNav>
            </HeaderCenter>
            <HeaderRight className='fr'>
              <HeaderUl>
                <HeaderLi className='fl' >
                  <HeaderItem>
                    App 下载
                  </HeaderItem>
                </HeaderLi>
                <HeaderLi className='fl' >
                  <HeaderItem>
                    搜索
                  </HeaderItem>
                </HeaderLi>
                {loadLogin(login)}
              </HeaderUl>
            </HeaderRight>
          </HeaderBox>
        </HeaderWrapper>
      </Fragment>
    )
  }
}

const loadLogin = (isLogin) => {
  if (!isLogin) {
    return (
      <Fragment>
        <HeaderLi className='fl' >
          <Link to='/login' >
            <HeaderItem>
              登录
            </HeaderItem>
          </Link>
        </HeaderLi>
        <HeaderLi className='fl' >
          <Link to = '/Reg'>
            <HeaderItem>注册</HeaderItem>
          </Link>
        </HeaderLi>
      </Fragment>
    )
  } else {
    return (
      <HeaderLi className='fl' >
        <HeaderItem>登陆成功</HeaderItem>
        <span>退出</span>
      </HeaderLi>
    )
  }
};


const mapStateToProps = (state) => ({
  login: state.login.login
});

const mapDispatchToProps = (dispatch) => ({
  
});
export default connect(mapStateToProps, mapDispatchToProps)(Header);